<template>
  <div class="footer-wrap"
       v-if="show">
    <div class="logo"
         @click="handleHome"></div>
    <div class="compony-info">
      <ul class="info-list">
        <li class="item">
          <div class="iconfont icon">&#xe8a5;</div>
          <div class="compony info-content">{{info.company_addr}}</div>
        </li>
        <li class="item">
          <div class="iconfont icon">&#xe615;</div>
          <div class="compony info-content">
            <div class="phone"
                 v-for="(item,index) of info.company_phone"
                 :key="index">{{item}}</div>
          </div>
        </li>
        <li class="item">
          <div class="iconfont icon">&#xe6a4;</div>
          <div class="compony info-content">{{info.company_email}}</div>
        </li>
        <li class="item">
          <div class="iconfont icon">&#xe67c;</div>
          <div class="compony info-content">{{info.company_addr}}</div>
        </li>
      </ul>
      <div class="code">
        <div class="img-wrap"
             w-120-120
             aspectratio>
          <img :src="info.qrcode"
               alt=""
               aspectratio-content>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  props: {
    info: {
      type: Object
    }
  },
  data () {
    return {
      show: false
    }
  },
  watch: {
    info () {
      this.show = true
      this.$emit('loadImg')
    }
  },
  methods: {
    handleHome () {
      this.$router.push({
        path: '/home'
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.footer-wrap
  width 100%
  padding()
  padding-top 40px
  padding-bottom 30px
  background-color $footer_bgc

  .logo
    width 248px
    height 28px
    bgckImg('~@/assets/images/logo_white.png', center, center)
    margin-bottom 32px

  .compony-info
    display flex
    justify-content space-between

  .item
    display flex
    font-size $common_fz
    color $common_bgc
    opacity 0.5
    max-width 581px
    line-height 42px

    .icon
      margin-right 15px

    .info-content
      font-weight 400
      max-width 500px

  .code
    width 120px
    height 120px
</style>
